<template>

    <div>
        <el-form>
        <el-form-item>
        <el-date-picker type="date" placeholder="请选择开始时间" value-format="yyyy-MM-dd" v-model="reportStartTime" v-if="hackReset">
        </el-date-picker>
        <el-date-picker type="date" placeholder="请选择结束时间" value-format="yyyy-MM-dd" v-model="reportEndTime" v-if="hackReset">
        </el-date-picker>
        <el-button @click="fillData()">查询</el-button>
        <div></div>
         </el-form-item>
         <el-form-item>
        <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box animated bounceInRight">
                    <span class="info-box-icon" style="background-color: #00a65a">
                        <img src="~@/assets/img/Electricity_White.png" style="height: 50%; margin-top: 20%;"></span>
                    <div class="info-box-content">
                        <span class="info-box-text" data-language="info-Electricity">Electricity</span>
                        <span class="info-box-number" id="electricity"><small></small></span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box animated bounceInRight">
                    <span class="info-box-icon" style="background-color: #f39c12">
                        <img src="~@/assets/img/Chiller_White.png" style="height: 50%; margin-top: 20%;"></span>

                    <div class="info-box-content">
                        <span class="info-box-text">chiller</span>
                        <span class="info-box-number" id="chillerCost"><small></small></span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <!-- fix for small devices only -->
            <div class="clearfix visible-sm-block"></div>

            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box animated bounceInRight">
                    <span class="info-box-icon" style="background-color: #dd4b39">
                        <img src="~@/assets/img/Steam_White.png" style="height: 50%; margin-top: 20%;"></span>

                    <div class="info-box-content">
                        <span class="info-box-text" data-language="info-Steam">Steam</span>
                        <span class="info-box-number" id="steam"><small></small></span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box animated bounceInRight">
                    <span class="info-box-icon" style="background-color: #00c0ef">
                        <img src="~@/assets/img/Water_White.png" style="height: 50%; margin-top: 20%;"></span>

                    <div class="info-box-content">
                        <span class="info-box-text" data-language="info-Water">Water</span>
                        <span class="info-box-number" id="water"><small></small></span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <!-- /.col -->
        </div>

  <!-- ELECTRICITY TREND -->
        <div class="row">
            <div class="col-md-12">
                <div class="box  animated zoomIn">
                    <div class="box-header with-border">
                        <h3 class="box-title" id="header-Electricity"></h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" @click="DownloadImage('canvasElectricity','jsLineElectricityTrend')"><i class="fa fa-download"></i></button>
                            <button type="button" class="btn btn-box-tool" @click="Print('canvasElectricity','jsLineElectricityTrend')"><i class="fa fa-print"></i></button>
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                        </div>
                    </div>
                  <div class="box-body">
                        <div class="row">
                             <div class="col-md-12">
                                <div class="box-body chart-responsive animated">
                                        <div id='chartElectricity' style="position: relative; overflow: visible; height: 230px;">
                                         <canvas id="canvasElectricity" style="height: 230px;"></canvas>
                                        </div>
                                <!-- /.chart-responsive -->
                                </div>
                            </div>
                            </div>
                        <!-- /.row -->
                   </div>
                    <!-- ./box-body -->
                </div>
            </div>
        </div>
         </el-form-item>
        </el-form>
    </div>
</template>
<script>
import Chart from 'chart.js'
import $ from 'jquery'
import { canvasSaveFile, canvasPrint } from '@/utils/image.min.js'

export default {
        components: {
        },
    data () {
        return {
      reportStartTime: '2017-08-20', // 申报开始时间
      reportEndTime: '2017-08-28', // 申报结束时间
      hackReset: true
        }
    },
    mounted () {
        this.fillData()
        // drawChart(){}
    },
    methods: {
        fillData () {
            this.$http.get(
            `${window.SITE_CONFIG['baseURL']}/demo/charts2/list`,
            {
                mode: 'no-cors',
                headers: {
                'Access-Control-Allow-Origin': '*',
                'Content-Type': 'application/json'
                },
                withCredentials: true,
                params: {
                'spName': 'SP_EMS_Electricity',
                'spParams': this.reportStartTime + ',' + this.reportEndTime
                }
            }
            ).then(({data}) => {
                this.LineChartHandler(data)
                LoadInfoBox2()
            })
        },
        DownloadImage (str1, str2) {
            DownloadImage(str1, str2)
        },
        Print (str1, str2) {
            Print(str1, str2)
        },
  FloatToFixed (value, precision) {
    var returmArr = []
    if (precision == null || precision === '') {
            precision = 1
        }
    for (var i = 0; i < value.length; i++) {
        returmArr[i] = parseFloat(parseFloat(value[i]).toFixed(precision))
    }
    return returmArr
    },
    LineChartHandler (data) {
        var shifdateArr = []
        var assemblyArr = []
        var crankArr = []
        var blockArr = []
        var headArr = []
        console.log(data)
         for (var i = 0; i < data.results.length; i++) {
             console.log(data.results[i].label)
                if (data.results[i].label === 'AssemblyLine') {
                assemblyArr = FloatToFixed(data.results[i].label_data, 2)
                }
                if (data.results[i].label === 'CrankLine') {
                crankArr = FloatToFixed(data.results[i].label_data, 2)
                }
                if (data.results[i].label === 'BlockLine') {
                  blockArr = FloatToFixed(data.results[i].label_data, 2)
                }
                if (data.results[i].label === 'HeadLine') {
                  headArr = FloatToFixed(data.results[i].label_data, 2)
                }
                if (data.results[i].label === 'SHIFTDATE') {
                  shifdateArr = data.results[i].label_data
                }
                }
        $('#canvasElectricity').remove() // this is my <canvas> element
        $('#chartElectricity').append('<canvas id="canvasElectricity" style="height: 230px;"></canvas>')
        $('#header-Electricity').text(this.$t('reportContent.EnergyConsumptionDashboard') + ' ' + this.reportStartTime + ' ~ ' + this.reportEndTime)
        var ctx2 = document.getElementById('canvasElectricity')
        /* eslint-disable no-new */
        var config = {
                type: 'line',
                data: {
                labels: shifdateArr,
                datasets: [{
                    label: 'AssemblyLine',
                    backgroundColor: 'rgba(0,192,239,1)',
                    borderColor: 'rgba(0,192,239,1)',
                    fill: false,
                    borderWidth: 1,
                    radius: 2,
                    data: assemblyArr
                }, {
                    label: 'BlockLine',
                    backgroundColor: 'rgba(221,75,57,1)',
                    borderColor: 'rgba(221,75,57,1)',
                    fill: false,
                    borderWidth: 1,
                    radius: 2,
                    data: blockArr
                }, {
                    label: 'CrankLine',
                    backgroundColor: 'rgba(243,156,18,1)',
                    borderColor: 'rgba(243,156,18,1)',
                    fill: false,
                    borderWidth: 1,
                    radius: 2,
                    data: crankArr
                }, {
                    label: 'HeadLine',
                    backgroundColor: 'rgba(0,166,90,1)',
                    borderColor: 'rgba(0,166,90,1)',
                    fill: false,
                    borderWidth: 1,
                    radius: 2,
                    data: headArr
                }]
                      },
                options: {
                    animation: {
                    duration: '2000',
                    easing: 'easeOutBack'
                },
                responsive: true,
                maintainAspectRatio: false,
                title: {
                    display: true,
                    padding: 0,
                    text: 'ElectricityTrend',
                    fontColor: '#666',
                    fontSize: 15
                },
                scales: {
                    xAxes: [{
                        display: true,
                        gridLines: {
                            display: false,
                            drawTicks: true
                        }
                    }],
                    yAxes: [{
                        display: true,
                        gridLines: {
                            drawTicks: false
                        },
                        ticks: {
                            callback: function (value, index, values) {
                                return value + 'KWH'
                            }
                        }
                    }]
                },
                legend: {
                    display: true
                },
                tooltips: {
                    mode: 'x-axis',
                    callbacks: {
                        label: function (tooltipItem, data) {
                            var label = data.datasets[tooltipItem.datasetIndex].label || ''
                            if (label) {
                                label += ': '
                            }
                            label += tooltipItem.yLabel + 'KWH'
                            return label
                        }
                    }
                }
            }
            }
// 开始绘制柱状图
    // 图例
new Chart(ctx2, config)
        }
    }
}
function FloatToFixed (value, precision) {
    var returmArr = []
    if (precision == null || precision === '') {
            precision = 1
        }
    for (var i = 0; i < value.length; i++) {
        returmArr[i] = parseFloat(parseFloat(value[i]).toFixed(precision))
    }
    return returmArr
    }
function LoadInfoBox2 () {
    document.getElementById('electricity').innerText = '10 KWH'
    document.getElementById('chillerCost').innerText = '20 KWH'
    document.getElementById('steam').innerText = '30 T'
    document.getElementById('water').innerText = '40 M3'
    }
function DownloadImage (Id, title) {
        var canvas = document.getElementById(Id)
        // eval('title = langAnalysis.' + title);
        canvasSaveFile(canvas, 'png', title)
    }
function Print (Id, title) {
    var canvas = document.getElementById(Id)
    // eval('title = langAnalysis.' + title);
     canvasPrint(canvas, title)
}
</script>
<style type="text/css">
        .custom-fonts-yahei {
            font-family: '微软雅黑',sans-serif;
        }

        .custom-color {
            color: #000000;
            background-image: -webkit-linear-gradient(92deg,#000000,#ff0000);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-animation: hue 5s infinite linear;
        }

        h1, h2, h3, h4, h5, span, p, div, td, a, input {
            font-family: '微软雅黑',sans-serif;
        }

        @-webkit-keyframes hue {
            from {
                -webkit-filter: hue-rotate(360deg);
            }

            to {
                -webkit-filter: hue-rotate(-360deg);
            }
        }
        .table-striped > tbody > tr.selected {
            background-color: #aab7d1;
        }
        .btn-box-tool {
            padding-top: 0px;
        }
    </style>
